// import TTable, { TTd ,TTh, TTr } from 't/basic/table';


import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, pickOwnForBasicComponent } from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  ref
} from 'vue';
import './index.scss';

import Main from './components/main';

import { useQuasar } from '@teld/q-components';
export default defineComponent({
  name: 'TPopupSearch',
  directives: {
    removeTabindex: {
      mounted(el) {
        // 移除 tabindex 属性
        el?.removeAttribute('tabindex');
      },
    },
  },
  props: {
    ...commonProps,
    showSearchBar: Main.props.showSearchBar,
    mobileOnly: {
      type: Boolean,
      default() {
        return true;
      },
    },
    compact: {
      type: Boolean,
      default() {
        return true;
      },
    },
    autoQuery: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const main = ref();
    const publicMethod = {
      refresh: () => {
        main.value.refresh();
      },
      open: () => {
        main.value.open();
      },
      close: () => {
        main.value.close();
      },
      searchValue: computed(() => {
        return main.value.searchValue;
      }),
    };
    const [mappingProps, mappingExpose] = useMappingProps(props, publicMethod);
    expose(mappingExpose);

    return () => {
      return (
        <Main
          v-removeTabindex
          compact={props.compact}
          showSearchBar={mappingProps.showSearchBar}
          autoQuery={mappingProps.autoQuery}
          class={[
            't-popup-search',
            props.compact &&
              'compact' /* 不通过组件做响应式，如果要实现就通过界面响应式配置 * props.mobileOnly ? "mobileOnly" : ""*/,
          ]}
          v-show={mappingProps.visible}
          ref={main}
        >
          {slots}
        </Main>
      );
    };
  },
});
